<template>
  <div>
    <Nav></Nav>
    <div class="container layout layout-margin-top">
      <!-- 面包屑导航 -->
      <ol class="breadcrumb">
        <li><a href="/courses/">全部课程</a></li>
        <li>
          <a href="/courses/?tag=Linux">{{course.tag}}</a>
        </li>
        <li class="active">
          <a href="/courses/1">
            {{course.title}}
          </a>
        </li>
      </ol>

      <div class="row">
        <div class="col-md-9 layout-body">
          <div class="side-image side-image-mobile">
            <img :src="course.img">
          </div>
          <div class="content course-infobox">
            <div class="clearfix course-infobox-header">
              <h4 class="pull-left course-infobox-title">
                <span>{{course.title}}</span>
              </h4>
              <div class="pull-right course-infobox-follow">
                <span class="course-infobox-followers">{{course.attention_count}}</span>
                <span>人关注</span>
                <i
                  class="fa fa-star-o"
                  data-next="/login?next=%2Fcourses%2F1"
                ></i>
              </div>
            </div>
            <div class="clearfix course-infobox-body">
              <div class="course-infobox-content">
                <p>{{course.info}}</p>
              </div>
              <div class="course-infobox-progress">
                <div
                  v-for="t in course.section_count"
                  :key="t"
                  class="course-progress-new"
                ></div>
                <span>（0/{{course.section_count}}）</span>
              </div>
              <div class="pull-right course-infobox-price">
              </div>
            </div>
            <div class="clearfix course-infobox-footer">
              <div class="pull-right course-infobox-learned">{{course.learn_count}} 人学过</div>
            </div>
          </div>
          <div class="content">
            <ul class="nav nav-tabs">
              <li :class="{active:courseTag=='labs'}">
                <a @click="courseTag='labs'">实验列表</a>
              </li>
              <li :class="{active:courseTag=='comments'}">
                <a @click="courseTag='comments'">课程评论({{course.comment_count}})</a>
              </li>
              <li :class="{active:courseTag=='reports'}">
                <a @click="courseTag='reports'">实验报告({{course.report_count}})</a>
              </li>
              <li :class="{active:courseTag=='answers'}">
                <a @click="courseTag='answers'">实验问答({{course.answer_count}})</a>
              </li>
            </ul>
            <div class="tab-content">
              <!-- 实验列表, 课程列表 -->
              <template v-if="courseTag=='labs'">
                <div
                  v-for='item in course.courses_section'
                  :key='item.id'
                  class="tab-pane"
                  :class="{active:courseTag=='labs'}"
                >
                  <div class="lab-item ">
                    <h4 class="lab-item-title">{{item.title}}</h4>
                  </div>
                  <div
                    v-for="(v,index) in item.videos"
                    class="lab-item"
                    :key="v.id"
                  >
                    <div class="lab-item-status">
                      <img src="@/assets/img/lab-not-ok.png">
                    </div>
                    <div class="lab-item-index">第{{index+1}}节</div>
                    <div
                      class="lab-item-title"
                      :title="v.title"
                    >{{v.title}}</div>
                    <div class="pull-right lab-item-ctrl"></div>
                  </div>

                </div>
              </template>

              <!-- 评论列表 -->
              <template v-if="courseTag=='comments'">
                <div
                  class="tab-pane course-comment"
                  :class="{active:courseTag=='comments'}"
                >
                  <div class="comment-box">
                    <div class="comment-form">

                      <div class="comment-form-unlogin">
                        请
                        <a
                          href="#sign-modal"
                          data-next="/courses/1"
                        > 登录 </a>
                        后发表评论
                      </div>

                    </div>
                    <div class="comment-title">最新评论</div>
                    <div class="comment-list">
                    </div>
                    <div class="pagination-container"></div>
                  </div>
                </div>
              </template>

              <!-- 实验报告 -->
              <template v-if="courseTag=='reports'">
                <div
                  class="tab-pane"
                  :class="{active:courseTag=='reports'}"
                >
                  <span
                    class="lab-id active"
                    data-lab-id="None"
                  >全部</span>

                  <span
                    class="lab-id"
                    data-lab-id="1"
                  >第1节</span>

                  <span
                    class="lab-id"
                    data-lab-id="2"
                  >第2节</span>

                  <span
                    class="lab-id"
                    data-lab-id="3"
                  >第3节</span>

                  <span
                    class="lab-id"
                    data-lab-id="59"
                  >第4节</span>

                  <span
                    class="lab-id"
                    data-lab-id="60"
                  >第5节</span>

                  <span
                    class="lab-id"
                    data-lab-id="61"
                  >第6节</span>

                  <span
                    class="lab-id"
                    data-lab-id="62"
                  >第7节</span>

                  <span
                    class="lab-id"
                    data-lab-id="1917"
                  >第8节</span>

                  <span
                    class="lab-id"
                    data-lab-id="1918"
                  >第9节</span>

                  <span
                    class="lab-id"
                    data-lab-id="63"
                  >第10节</span>

                  <span
                    class="lab-id"
                    data-lab-id="337"
                  >第11节</span>

                  <span
                    class="lab-id"
                    data-lab-id="346"
                  >第12节</span>

                  <span
                    class="lab-id"
                    data-lab-id="354"
                  >第13节</span>

                  <span
                    class="lab-id"
                    data-lab-id="356"
                  >第14节</span>

                  <span
                    class="lab-id"
                    data-lab-id="1943"
                  >第15节</span>

                  <span
                    class="lab-id"
                    data-lab-id="1944"
                  >第16节</span>

                  <span
                    class="lab-id"
                    data-lab-id="1945"
                  >第17节</span>

                  <div class="report-owner">
                    <span
                      class="owner-list"
                      data-user-id=""
                    >我的报告</span> / <span
                      class="owner-list active"
                      data-user-id="None"
                    >所有报告</span>
                  </div>
                  <div class="row report-items"></div>
                  <div class="pagination-container"></div>
                </div>
              </template>

              <!-- 实验问答 -->
              <template v-if="courseTag=='answers'">
                <div
                  class="tab-pane"
                  :class="{active:courseTag=='answers'}"
                >
                  <a
                    class="btn btn-success"
                    data-toggle="modal"
                    data-target="#askquestion"
                  >我要提问</a>
                  <hr>
                  <ul class="row question-items"></ul>
                  <div class="pagination-container"></div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <!-- 侧边栏 -->
        <div class="col-md-3 layout-side">
          <!-- 侧栏 课程图片 -->
          <div class="side-image side-image-pc">
            <img :src="course.img">
          </div>
          <!-- 侧栏 教师信息 -->
          <div class="sidebox mooc-teacher">
            <div class="sidebox-header mooc-header">
              <h4 class="sidebox-title">课程教师</h4>
            </div>
            <div class="sidebox-body mooc-content">
              <a href="/user/20406">
                <img :src="teacher.img">
              </a>
              <div class="mooc-info">
                <div class="name"><strong>{{teacher.name}}</strong> </div>

                <div class="courses">共发布过<strong>{{teacher.courseNum}}</strong>门课程</div>
              </div>
              <div class="mooc-extra-info">
                <div class="word long-paragraph">
                  {{teacher.desc}}
                </div>
              </div>
            </div>
            <div class="sidebox-footer mooc-footer">
              <a
                href="/teacher/20406"
                target="_blank"
              >查看老师的所有课程 ></a>
            </div>
          </div>
          <!-- 侧栏 广告 -->
          <div class="side-image">
            <a
              href="/vip"
              target="_blank"
            >
              <img src="@/assets/img/banner-vip.png">
            </a>
          </div>
          <!-- 侧栏 课程推荐 -->
          <div class="sidebox adv-course">
            <div class="sidebox-header">
              <h4 class="sidebox-title">进阶课程</h4>
            </div>
            <div class="sideobx-body course-content">

              <a href="/courses/204">实用Linux Shell编程</a>

              <a href="/courses/2">Vim编辑器</a>

              <a href="/courses/68">Linux命令实例练习</a>

            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Nav from '@/components/Nav'
import Footer from '@/components/Footer'
export default {
  components: {
    Nav,
    Footer
  },
  data() {
    return {
      courseTag: 'labs', // labs:实验列表,comments:课程评论,reports:实验报告,answers:实验问答
      course: {
        id: 0, // 课程id
        tag: 'Linux', // 课程标签
        title: 'Linux 基础入门（新版）', // 课程名称
        img: 'https://dn-simplecloud.shiyanlou.com/ncn1.jpg?imageView2/0/h/300', // 课程图片
        attention_count: 123, // 关注人数
        learn_count: 12354, // 学习人数
        info: '要在实验楼愉快地学习，先要熟练地使用 Linux，本实验介绍 Linux 基本操作，shell 环境下的常用命令。..', // 课程简介
        section_count: 16, // 章节数
        comment_count: 2345, // 评论数
        report_count: 1234, // 实验报告数
        answer_count: 345, // 实验问答数
        courses_section: [{
          id: 0,
          title: '第1章:Linux 系统简介', // 章名
          seq_num: 1, // 序号
          videos: [
            {
              id: 0, // 视频id
              title: '基本概念及操作', // 视频名称
              seq_num: 1 // 序号
            },
            {
              id: 1, // 视频id
              title: '用户及文件权限管理', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 2, // 视频id
              title: 'Linux 目录结构及文件基本操作', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 3, // 视频id
              title: '用户及文件权限管理', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 4, // 视频id
              title: '环境变量与文件查找', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 5, // 视频id
              title: '文件打包与解压缩', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 6, // 视频id
              title: '文件系统操作与磁盘管理', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 7, // 视频id
              title: 'Linux下的帮助命令', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 8, // 视频id
              title: 'Linux任务计划crontab', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 9, // 视频id
              title: '命令执行顺序控制与管道', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 10, // 视频id
              title: '简单的文本处理', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 11, // 视频id
              title: '数据流重定向', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 12, // 视频id
              title: '正则表达式基础', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 13, // 视频id
              title: 'Linux下软件安装', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 14, // 视频id
              title: 'Linux 进程概念', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 15, // 视频id
              title: 'Linux 进程管理', // 视频名称
              seq_num: 2 // 序号
            },
            {
              id: 16, // 视频id
              title: 'Linux 日志系统', // 视频名称
              seq_num: 2 // 序号
            }
          ]
        }] // 课程章节
      },
      teacher: {
        id: 20406,
        name: 'Edward', // 老师姓名
        desc: '资深程序员，5年Linux运维、企业级开发经验及数据库实战和教学经验。',
        courseNum: 20,
        img: 'http://iopsyche.gitee.io/static/syl/assets/img/Linux&c.png'
      }
    }
  }
}
</script>
<style scoped>
.container {
  text-align: left;
}
</style>
